<template>
  <!-- 修改height:100%,会导致某些页面下拉出现问题-->
  <div
    :class="'template-container dataview-loading-override' + (isCollapse ? '  dataview-left-group-collapse' : '')  + (isHide ? '  dataview-left-group-hide' : 'dataview-left-group-hide')" style="width:100%;"
       v-loading="listLoading"
       element-loading-text="拼命加载中"
       element-loading-spinner="spinner-user"
       element-loading-background="rgba(0, 0, 0, 0)"
       element-loading-custom-class="spinner-custom"
       @mousemove="mousemove"
       @keydown="keydownMonitorBox"
       id="dataviewBox"
  >
    <customEmpty :show="cpPropTableHide" :title="cpPropTableHideMsg"/>


    <customForm
      @enter="handleQueryClick"
      class="query-form-data-view animated fadeInUp"
      :data="tableForm.data"
      ref="queryFormDataView"
      :labelWidth="cpQueryFormLabelWidth"
      :layoutMini="true"
      v-show="!cpPropTableHide && !propHideQueryButton"
    >
      <template #content>
        <customFormItem
          v-for="item in cpQueryForm" :key="item.name"
          :name="item.name"
          :label="utilFieldMap.show(item.name, item.title, 'dataview', propViewKey)"
          :parent="_self"
          :form="tableForm.data"
          v-bind="getFormItemAttr(item)"
          @change="queryFormItemChange(item)"
          :class="'query-form-data-view-' + item.queryType"
        />
        <!--        <customSpace style="margin-left: 30px">
                  <template #content>
                    <customButton @click="handleQueryClick"  title="查询" theme="primary">
                    </customButton>
                    <customButton @click="handleUserQueryReset"  title="重置" theme="primary">
                    </customButton>
                    <customButton @click="queryFormToggle"  title="折叠" theme="primary">
                    </customButton>

                  </template>
                </customSpace>-->
      </template>
    </customForm>

    <!-- 主网格 -->
    <vxe-grid ref="tbMain"
              v-show="!cpPropTableHide"
              :size="tbMainSize"
              :loading="false"
              :animat="animat"
              :cloak="cloak"
              :max-height="cpTableHeight"
              :defaultSort="cpDefaultSort"
              :edit-config="editConfig"
              :edit-rules="rules"
              :mouse-config="{selected: true}"
              :row-style="rowStyle"
              :expand-config="expandConfig"
              :export-config="exportConfig"
              keep-source
              :show-overflow="cpColumns && cpColumns.length > 0 && cpColumns.findIndex(column => column.isWrapLine && column.isWrapLine == true) !=-1 ? false: true"
              stripe
              border
              resizable
              highlight-hover-row
              highlight-hover-column
              highlight-current-row
              @current-change="handleCurrentRowChange"
              @cell-dblclick="handleTableDbClick"
              :sort-config="sortConfig"
              @sort-change="handleSortChange"
              @header-cell-click="handleGridHeaderClick"
              @cell-click="handleCellClick"
              @edit-closed="editClosedEvent"
              @toolbar-button-click="toolbarButtonClickEvent"
              v-editable-row-focus-next-on-enter="{nextRow: () => this.rowSaveRefresh() }"
              :checkbox-config="{labelField: '', checkMethod: checkMethod}"
              :keyboard-config="{isArrow: false,isEnter: false,isEdit: false,enterToTab :false}"
              :props="{}"
              @radio-change="handleCurrentRowChange"
              @checkbox-change="handleCheckboxChange"
              @checkbox-all="handleCheckboxAll"
              sortable
              :style="getStyle()"
              class="dataview-load-stru"
              auto-resize
              sync-resize
              :tooltip-config="{contentMethod: showTooltipMethod}"
              :scroll-y="{gt: 50, mode: 'wheel', enabled: true, oSize: 50}"
              :row-class-name="rowClassName"
              @keydown="keydownMonitor"
              @edit-actived="editActived"
              :toolbar-config="tableToolbarConfig"
              :valid-config="{autoPos: false,showMessage: false}"
    >

      <!--  顶部工具栏按钮-->
      <template v-slot:toolbar_buttons>
        <!-- 列表 顶部按钮 -->
        <customSpace v-if="cpToolbarBtn.length > 0">
          <template #content>
            <customButton
              v-for="rowButton in cpToolbarBtn"
              :key="rowButton.code"
              :theme="utils.getTheme(rowButton.status)"
              :title="getToolbarButtonTitle(rowButton)"
              :class="'btn-top-'+rowButton.code + '-'+ rowButton.iconStatic"
              @click="toolbarButtonClickEvent(rowButton)"
            >
              <!--静态图标-->
              <template #iconLeft v-if="rowButton.iconStatic">
                <customImage :src="icon.toolbar[rowButton.iconStatic]" :width="15" :height="15" class="button-image"/>
              </template>
              <!--静态图标-->
              <template #iconLeft v-else-if="rowButton.icon &&  icon.toolbar[rowButton.icon] ">
                <customImage :src="icon.toolbar[rowButton.icon]" :width="15" :height="15" class="button-image"/>
              </template>
            </customButton>
          </template>
        </customSpace>
      </template>

      <vxe-table-column type="seq" width="50" align="center" fixed="left" title="序" />
      <vxe-table-column v-if="cpShowCheckbox"
        type="checkbox"
        :selectable="isSelectable"
        width="50"
        align="center"
        fixed="left"
      />

      <vxe-table-column  type="radio" width="50" v-else-if="cpShowRadiobox" fixed="left">
      </vxe-table-column>

      <vxe-table-column
        v-for="(column,index) in cpColumns"
        :type="column.expandColumn ? 'expand' : ''"
        :key="column.name"
        :field="column.name"
        :title="utilFieldMap.show(column.name,column.title,'dataview',propViewKey)"
        :edit-render="rowEditRender(column)"
        :align="strings.defaultIfBlank(column.align, 'center')"
        :sortable="!(column.sortable && column.sortable != false)"
        :width="column.columnWidth ? column.columnWidth : column.width"
        :minWidth="120"
        :class-name="column.name + ' '+ (column.isWrapLine ? 'cell-wrap' : ' ' + (column.editRender || column.edit) ? 'col--edit-user' : ' ')"
        :params="column"
        :show-overflow-tooltip = "column.isWrapLine && column.isWrapLine == true ? false : true"
        :fixed="strings.defaultString(column.fixed, null)"
        :show-overflow="column.isWrapLine && column.isWrapLine == true ? false : true"
      >
        <!--表头列-->
        <template #header="scope" >
          {{_columnRender(column)}}
          <span>{{cpIsFlagColumnsDefaultConfig ? column.title : utilFieldMap.show(column.name,column.title,'dataview',propViewKey)}}</span>
          <i v-if="isColumnEdit(column) && column.name != 'matrName'" class="el-icon-edit" ></i>
        </template>


        <template slot-scope="scope" v-if="column.expandColumn" >
          {{utilFieldMap.value(column.name,scope.row[column.name],'dataview',propViewKey,scope.row)}}
        </template>
        <template #content="scope" v-if="column.expandColumn" >
          <div   :style="getChildTableStyle()">
            <vxe-grid  :data="scope.row.childData" :ref="scope.row[primaryKey]" :id="scope.row[primaryKey]"
                       @checkbox-change="handleChildCheckboxChange"
                       @checkbox-all="handleChildCheckboxAll"
                       :params="{parentId: scope.row[primaryKey], parentRows:scope.row }"
                       show-overflow
            >
              <vxe-table-column type="seq" width="50" align="center"/>
              <vxe-table-column
                type="checkbox"
                width="50"
                align="center"
                v-if = "propShowChildCheckbox || showChildCheckbox"
              />

              <vxe-table-column
                v-for="(column2,index) in scope.row.childCols"
                :key="column2.field"
                :field="column2.field"
                :title="column2.title"
                :width="column2.columnWidth ? column2.columnWidth : 120"
              >
                <template slot-scope="scope">
                  <template >
                    <span v-if="strings.isNotBlank(column2.datePattern)" class="div-NoWrap">{{scope.row[column2.field] | formatDate(column2.datePattern)}}</span>
                    <span v-else v-html="scope.row[column2.field]"  class="div-NoWrap"></span>
                  </template>
                </template>
              </vxe-table-column>
            </vxe-grid>
          </div>
        </template>
        <template slot-scope="scope" v-else>
          <template v-if="column.cmode">
            <slot
              :name="column.name"
              :field="column.name"
              :value="scope.row[column.name]"
              :row="scope.row"
            ></slot>
          </template>
          <template v-else>
            <span v-if="strings.isNotBlank(column.datePattern)" class="div-NoWrap">{{scope.row[column.name] | formatDate(column.datePattern)}}</span>
            <span v-else v-html="getColumnValue(column, scope.row, false)"  class="div-NoWrap"></span>
          </template>
        </template>

        <!--编辑插槽-->
        <template #edit="scope" v-if="!isColumnEdit(column)" >
          <!-- 其他作为不可编辑的-->
          <div v-html="getColumnValue(column, scope.row, false)" class="div-NoWrap"></div>
        </template>

        <!--编辑插槽 自定义选择-->
        <template #edit="scope" v-if="isColumnEdit(column) && column.editRender && ['customSelect'].includes(column.editRender) ">
          <customInput
            :label="utilFieldMap.show(column.name,column.title,'dataview',propViewKey)"
            :name="column.name"
            :parent="_self"
            :form="scope.row"
            :readonly="true"
            suffixIcon="unfold-more"
            :isInnerForm="false"
            :hideLabel="true"
            v-model="scope.row[column.name]"
            @focus="_customSelectFocus(column, scope.row)"
            v-if="strings.isBlank(scope.row.id)"
          />
          <div v-else v-html="getColumnValue(column, scope.row, false)" class="div-NoWrap"></div>
        </template>
        <!--编辑插槽 自定义选择 始终存在-->
        <template #edit="scope" v-else-if="isColumnEdit(column) && column.editRender && ['customSelectAlways'].includes(column.editRender) ">
          <customInput
            :label="utilFieldMap.show(column.name,column.title,'dataview',propViewKey)"
            :name="column.name"
            :parent="_self"
            :form="scope.row"
            :readonly="true"
            suffixIcon="unfold-more"
            :isInnerForm="false"
            :hideLabel="true"
            v-model="scope.row[column.name]"
            @focus="_customSelectFocus(column, scope.row)"
          />
        </template>
        <!--编辑插槽 数字 > 0-->
        <template #edit="scope" v-else-if="isColumnEdit(column) && column.editRender && ['inputNumberGt0'].includes(column.editRender) ">
          <customInputNumber
            :label="utilFieldMap.show(column.name,column.title,'dataview',propViewKey)"
            :name="column.name"
            :parent="_self"
            :form="scope.row"
            :isInnerForm="false"
            :hideLabel="true"
            theme="normal"
            :min="1"
            v-model="scope.row[column.name]"
            @change="rowEditInputChange(scope)"
          />
        </template>

        <!--编辑插槽 日期框-->
        <template #edit="scope" v-else-if="isColumnEdit(column) && column.editRender && ['customDatePicker'].includes(column.editRender) ">
          <customDatePicker
            :label="utilFieldMap.show(column.name,column.title,'dataview',propViewKey)"
            :name="column.name"
            :parent="_self"
            :form="scope.row"
            :isInnerForm="false"
            :isInnerCell="true"
            v-model="scope.row[column.name]"
            @change="rowEditInputChange(scope)"
            :popupProps="{attach: () => $refs.tbMain.$el}"
          />
        </template>

        <!--下拉框(静态，调用者自己传递options)-->
        <template #edit="scope" v-else-if="isColumnEdit(column) && column.editRender && ['customSelectStatic'].includes(column.editRender) ">
<!--   tdesign嵌套报错
          <customSelect
            class="form-item-control"
            :label="utilFieldMap.show(column.name,column.title,'dataview',propViewKey)"
            :name="column.name"
            :parent="_self"
            :form="scope.row"
            :isInnerForm="false"
            :isInnerCell="true"
            :options="getCustomSelectStaticOption(column,scope.row)"
            v-model="scope.row[column.name]"
            @change="rowEditSelectChange(scope)"
          />
-->
          <el-select v-model="scope.row[column.name]" filterable clearable placeholder="请选择" @change="rowEditSelectChange(scope)">
            <el-option
              v-for="item in getCustomSelectStaticOption(column,scope.row)"
              :key = "item.value"
              :label = "item.label"
              :value = "item.value"
            >
            </el-option>
          </el-select>
        </template>

      </vxe-table-column>
      <vxe-table-column v-if="!propColumnButton && !propHideAllButton && !propOnlyQuery && cpShowOperationColumn && !propOnlyQuery2 " fixed="right"
        :width="cpColumnOpWidth" title="用户操作" align="center"
      >
        <template slot-scope="scope">
          <!-- 列表右侧按钮 -->
          <customSpace>
            <template #content>
              <customButton
                v-show="scope.row[primaryKey]  && !(propEditConfigMode == 'cell' && rowButton.key == 'vrb-edit' ) "
                v-for="rowButton in cpFilteredButtons(cpRowButtons, scope.row, true)"
                :key="rowButton.key"
                :theme="utils.getTheme(rowButton.type)"
                size="small"
                :title="rowButton.title"
                :class="'btn-'+rowButton.key"
                variant="outline"
                @click="handleRowButton(rowButton,scope.$index, scope.row)"
                :shape="['vrb-delete','vrb-edit', 'vrb-view'].includes(rowButton.key) ? 'square' : 'rectangle'"
              >
                <!--静态图标-->
                <template  #iconLeft v-if="rowButton.iconStatic">
                  <customImage :src="icon.column[rowButton.iconStatic]" :width="20" :height="20"   class="button-image-column"/>
                </template>
              </customButton>
            </template>
          </customSpace>
        </template>
      </vxe-table-column>
      <template slot="append">
        <slot name="append" :rows="rows0" :current="currentRow" :columns="columns || []"></slot>
      </template>

      <template v-slot:empty>
            <div style="    color: #768be9; padding-top: 11px ;padding-bottom: 11px" v-show = "isAfterFetchData">
              <img src='../assets/img/empty.png' style="height: 30px" >
              <p style="margin: 0px;">没有相关数据！</p>
            </div>
      </template>
    </vxe-grid>
    <!-- 分页 -->
    <vxe-pager
      v-show="!cpPropTableHide"
      border
      v-if="showPagination && !propHidePagination"
      size="medium"
      :current-page="tablePage.currentPage"
      :page-size="tablePage.pageSize"
      :page-sizes="tablePageSizes"
      :total="tablePage.totalResult"
      :background="true"
      :layouts="['Total', 'PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes']"
      @page-change="handlePageChange">

      <!--顶部合计区域
       sumTopColumns  [name:'amout',title:'合计',value:11111111111]
     -->
      <template #left>
        <div class="sum-left" v-if="sumTopColumns.length">
          <el-form   @submit.native.prevent class="form-sum" :inline="true" ref="formSum" v-if="sumTopColumns.length >0 " style="    height: 30px;text-align: right;">
            <el-form-item>
              <template #label>
                <span  class="title">合计</span>
              </template>
            </el-form-item>
            <el-form-item v-for="sumColumn in sumTopColumns" :key="sumColumn.name" :label="sumColumn.title" >
              <template>
                <span  class="title">{{sumColumn.value}}</span>
              </template>
              <template #label>
                <span  class="value">{{sumColumn.title}}</span>
              </template>
            </el-form-item>
          </el-form>
        </div>
      </template>
    </vxe-pager>

    <!-- 明细编辑弹框 -->
    <customDrawer :title="viewFormTitle"  :subtitle="propSubtitle" ref="customDrawerForm"
                  :widthPer="cpFormWidthPer"
                  :widthPx="cpFormWidthPx"
                  :heightPx="cpFormHeightPx"
                  :footer="false"
                  @hide="viewFormClose"
                  @show="_formShow"
                  @submit.native.prevent
                  sizeDraggable
    >
      <template #content >
          <!-- 明细界面按钮区域 -->
          <div  class="button-box-top">
            <customSpace>
              <template #content>

                <!-- 通用按钮 -->
                <customButton
                  v-for="button in cpFilteredButtons(cpViewFormButtons,viewFormData, false)"
                  :key="button.key"
                  :theme="utils.getTheme(button.title && button.title.indexOf('打印') != -1 ? 'default': button.type)"
                  :title="button.title"
                  size="medium"
                  @click="handleViewFormButton(button,viewFormData)"
                  v-show="viewFormButtonVisible "
                >
                  <!--静态图标-->
                  <template #iconLeft v-if="button.iconStatic">
                    <customImage  :src="icon.formTop[button.iconStatic]" :width="20" :height="20"  class="button-image-form-top"/>
                  </template>
                  <!--静态图标-->
                  <template #iconLeft v-else-if="button.title && button.title.indexOf('打印') != -1">
                    <customImage  :src="icon.formTop.print" :width="20" :height="20"  class="button-image-form-top"/>
                  </template>
                </customButton>

                <!-- 流程按钮-->
                <customButton
                  v-for="button in cpViewFormFlowButtons"
                  :key="button.code"
                  :theme="utils.getTheme(button.type)"
                  :title="button.title"
                  size="medium"
                  @click="handleViewFormFlow(button,viewFormData)"
                  v-show="viewFormButtonVisible"
                >
                </customButton>


                <customButton
                  key="sysLog" size="medium"
                  @click="utilSelect.sysLog(viewFormData? viewFormData[primaryKey] : -1)"  title="操作记录"
                  theme="default"
                  v-if="propShowBtnLog && viewFormStatus != 'addnew'">
                  <!--静态图标-->
                  <template  #iconLeft >
                    <customImage :src="icon.formTop.log" :width="20" :height="20"   class="button-image-form-top"/>
                  </template>
                </customButton>
                <customButton key="close" size="medium" @click="viewFormClose()"  title="关闭" theme="default">
                  <!--静态图标-->
                  <template  #iconLeft >
                    <customImage :src="icon.formTop.close" :width="20" :height="20"   class="button-image-form-top"/>
                  </template>
                </customButton>
              </template>
            </customSpace>
            <span v-html="formOpsg" ></span>
          </div>

          <div >
            <!-- 动态组件 -->
            <component
              v-if="viewForm!==null && viewFormVisible"
              :is="viewForm"
              ref="viewForm"
              :propParent="_self"
              :propParentPage="propParentPage"
              :propParentData="propParentData"
              :propPrimaryKey="primaryKey"
              :propCurrentRow="currentRow"
              :propViewFormData="viewFormData"
              :propDictionaries="viewFormDictionaries"
              :propReadonly="cpFormReadonly"
              :propStatus="viewFormStatus"
              :propRules="rules"
              :propInitData="propInitData"
              :propParam="propParam"
              :propCheckFlowParam="cpCheckFlowParam"
              @event-register="viewFormeventRegister"
              @data-callback="handleViewFormDataCallback"
              @add-button="handleViewFormAddButton"
              @refresh-grid="fetchData()"
              @refresh-row="refreshCurrentRow(viewFormData, false)"
              @hide-form-button="ocHideFormButtons()"
              @save="viewFormSave()"
              @close="viewFormVisible=false"
            />
          </div>
      </template>
    </customDrawer>

    <!--操作记录查看-->
    <tableDrawer ref="customDrawerLog" viewKey="sys_flow_log" :queryWrapper="cpLogWrapper"  loadForce propOnlyQueryAll/>

    <!--操作意见-->
    <customDrawer title="操作意见" ref="customDrawerAudit" :widthPx="500" :heightPx="250" @confirm="submitFlow">
      <template #content>
        <customForm :data="flowCommentForm">
          <template #content>
            <customFormItem
              label="操作意见"
              name="comment"
              :parent="_self"
              :form="flowCommentForm"
              :type="constCommon.formItemType.textarea.name"
              :config="{minRows: 3, autosize: false, maxRows: 5}"
              fullWidth
            />
          </template>
        </customForm>
      </template>
    </customDrawer>
  </div>
</template>

<script>
import dataviewExportOption from '../util/core/dataview/exportOption.js'

export default dataviewExportOption
</script>

<style lang="scss" >
  @import '../styles/version1/dataview.scss';
</style>
